<template>
  <div class="login-container" style="width:1200px;margin:0 auto" >
    <div
      class="box"
      style="
        height: 50px;
        margin: 0 auto;
        font-family: '楷体';
        text-align: center;
      "
    >
      <h1 >
        <span class="el-icon-edit">&nbsp;&nbsp;</span>客&nbsp;户&nbsp;详&nbsp;情
      </h1>
      <hr>
             <div style="margin-top:70px;"></div>
    </div>
             <div style="margin-top:30px;"></div>
     <div class="box1"  style="height: 500px ;width: 400px;float : left; ">
        
     <h2 class="gay1">持有卡:</h2>

    <div class="box5" v-for=" cs in form.cuscards" style="box-shadow: 2px 2px 4px rgba(0, 0, 0, .18), 0 0 6px rgba(0, 0, 0, .14);margin-bottom:20px;" > 
      <div class="box3" style="float:left;width:80px;margin-left:15px;">
      <p>&nbsp;</p>
         <h2 style="color:#F00;font-family:'楷体';"  v-if="cs.type===0">无折卡</h2>
           <h2 style="color:#F00;font-family:'楷体';" v-if="cs.type===2">八折卡</h2>
             <h2 style="color:#F00;font-family:'楷体';" v-if="cs.type===3">七折卡</h2>
      </div>
        <div class="box4" style="float:right;height:90px;width:230px;padding:15px">
            
         <p class="gay1"> 卡号：&nbsp;&nbsp;{{cs.cardid}}</p>
       
          <p class="gay1" style="color:#F00;"> 现余额：&nbsp;&nbsp;{{cs.money}}&nbsp;(元)</p>
      </div>
        <div style="clear:both;height:40px"></div>

      </div>
   
 

     </div>
  <div class="box1" style="height: 500px ;width: 700px;float : right; box-shadow: 2px 2px 4px rgba(0, 0, 0, .18), 0 0 6px rgba(0, 0, 0, .14);border-radius: 100px">
       <div style="margin-top:30px;"></div>
     
      
      <ul style="height:130px  ;width:300px;display:block;float:left">
        <oi class="gay">客户姓名:</oi>
        <h1 style="text-align:center;" class="gay1">{{form.name}}</h1>
      </ul>

<ul style="height:150px  ;width:300px;display:block;float:right">
  
       <img src = 'https://s3.bmp.ovh/imgs/2021/09/84d35e29a444cacf.webp' style="height:150px;width:190px;box-shadow: 2px 2px 4px rgba(0, 0, 0, .18), 0 0 6px rgba(0, 0, 0, .14);border-radius: 100px" />
        <!-- <h3 style="text-align:center">  {{images}}</h3> -->
      </ul>

  <ul style="height:60px;width:300px;display:block;float:left;">
        <oi class="gay">编号:</oi>
          {{form.customerid}}
      </ul>

      <ul style="height:60px;width:300px;display:block;float:right;">
       性别: <oi class="gay" v-if="form.sex===1">  女</oi>
       <oi class="gay" v-if="form.sex===0">  男</oi>
       
 </ul>
        <ul style="height:60px ;width:350px;display:block;float:left;" class="gay1">
        <oi class="gay">手机号:</oi>
        {{form.phone}}
      </ul>
          <!-- {{form.cuscards}} -->  
      </ul>
        <ul style="height:60px ;width:350px;display:block;float:right">
        <oi class="gay "  >次卡数量:</oi>
        {{form.numcard}}  
      </ul>

      </ul>

     </div>

<div style="clear:both;height:40px"></div>
<h1 class="gay1">卡消费记录</h1>
     <div class="box3"  style="  box-shadow: 2px 2px 4px rgba(0, 0, 0, .18), 0 0 6px rgba(0, 0, 0, .14);">       

     <el-table :data="searCard" border style="width: 100%" :row-class-name="tableRowClassName" >
      <el-table-column  prop="cardid"  align="center" label="卡号" width="150">

        <template slot-scope="scope" >
         <span   v-if="scope.row.cardid===0">
        次卡
　　　　　</span> 
         <span style="text-align:'center'"  v-if="scope.row.cardid>0">
       {{scope.row.cardid}}
　　　　　</span> 
　　　</template> 
   </el-table-column>

      <el-table-column prop="lastcard" align='center'  label="次卡数(消费，充值）：">
 <template slot-scope="scope" >
         <span   v-if="scope.row.lastcard===0">
        
　　　　　</span> 
         <span style="text-align:'center;color:green;'font-size:18px"  v-if="scope.row.lastcard>0&&scope.row.ctype===1">
       -{{scope.row.lastcard}}
　　　　　</span> 


  <span style="text-align:'center;color:red;'font-size:18px"  v-if="scope.row.lastcard>0&&scope.row.ctype===0">
      + {{scope.row.lastcard}}
　　　　　</span> 

　　　</template> 
      </el-table-column>

      <el-table-column prop="nowcard" align="center"  label="现在次卡数" >
         <template slot-scope="scope" >






         <span style="text-align:'center'"  v-if="scope.row.lastcard===0">
        
　　　　　</span> 
  <span style="text-align:'center';font-size:18px"  v-if="scope.row.lastcard>0">
        {{scope.row.nowcard}}
　　　　　</span> 
　　　</template> 
      </el-table-column>


      <el-table-column prop="hismoney" align="center" label="本次消费(打折后)" >
      <template slot-scope="scope" >
         <span style="color:red;font-size:18px"  v-if="scope.row.hismoney>0&&scope.row.ctype===0">
          {{ +scope.row.hismoney}}
　　　　　</span> 
        <span style="color:green;font-size:18px" v-if="scope.row.hismoney>0&&scope.row.ctype===1">
           {{-scope.row.hismoney}}  
　　　　　</span>   
      <span style="font-size:18px" v-if="scope.row.hismoney===null">
        
　　　　　</span>  
　　　</template> 

      </el-table-column>

      
      <el-table-column prop="lastmoney" align="center"  label="此次剩余金额" >
      <template slot-scope="scope" >
        <span style="font-size:18px">
           {{scope.row.lastmoney}}  
　　　　　</span> 
　　　</template> 
      </el-table-column>

      <el-table-column prop="createTime" align="center"  label="消费时间" >
 
      </el-table-column>

      <!-- <el-table-column prop="nowmoney" align="center"  label="当前金额" width="230">
      </el-table-column> -->


    </el-table>  
   <el-pagination
   background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  current-page=1
  :page-sizes="[10, 20, 30, 40]"
  :page-size="10"
  layout="total, sizes, prev, pager, next, jumper"
  :total="20"
  align="right"
>
    </el-pagination>
     </div>

  </div>
</template>

<script>
import customer from "../../../api/customer";

export default {
  data() {
    return {
      form: {
        name: "",
        customerid: "",
        birthday: "2020/01/01",
        money: "",
        type: "",
        phone: "",
        card: "0",
        numcard: "",
        cuscards: {},
      },
      searCard:[],
      pageForm:{
        id:'',
        current:'1',
        size:'10',
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    init() {
      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id;
        //调用根据id查询的方法
        this.handleClick(id);
        this.pageForm.id=id;
        //console.log(this.pageForm);
        this.searchMoney1();
      } else {
        //路径没有id值，做添加
        //清空表单
      }
    },
    //查询数据
    handleClick(row) {
      customer.searchCustomer(row).then((response) => {
        console.log(response.data);
        this.form = response.data;
      });
    },
    searchMoney1() {
     console.log(this.pageForm.size)
      customer.searchMoney(this.pageForm.id,this.pageForm.current ,this.pageForm.size ).then((response) => {
        console.log(this.pageForm)

        // response.data.forEach((ele) => {
        //   ele.createTime = this.transformTimestamp(ele.createTime);
        // });
        this.searCard = response.data.records;
        //  console.log(this.searCard )
      });
    },
    /*

    */
    // 页码切换
    handleCurrentChange(val){
      this.pageForm.current = val;
      this.pageForm.id = this.$route.params.id
   customer.searchMoney(this.pageForm.id,this.pageForm.current,this.pageForm.size).then((response) => {
      console.log(response.data.records)
     this.searCard = response.data.records;
      });
    },
    // 每页显示条目个数
    handleSizeChange(val){
      this.pageForm.size = val
     customer.searchMoney(this.pageForm.id,this.pageForm.current,this.pageForm.size).then((response) => {
  // console.log(this.$route.params.id)
   this.searCard = response.data.records;
 
      });
    },
  
  
  },
};
</script>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-table{
  margin-bottom: 20px;
}

.gay {
  font-family: "楷体";
  font-size: 20px;
  color: gray;
  box-shadow: 2px 2px 4px rgba(185, 183, 183, 0.18),
    0 0 6px rgba(143, 140, 140, 0.14);
}
.gay1 {
  font-family: "楷体";
  font-size: 20px;
  color: rgb(80, 79, 79);
}
.el-input__inner {
  width: 10%;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  /*outline: medium;*/
}
.red {
  color: red;
}
ul {
  font-family: "楷体";
  font-size: 15px;
  color: rgb(61, 60, 60);
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
